<template>
  <div class="dueRecord">
    <AreaWarp :padding="true">
      <SearchWarp :label="'联系号码'">
        <el-input v-model.trim="searchInfo.mobile" maxlength="11" placeholder="请输入手机号码"></el-input>
      </SearchWarp>
      <SearchWarp :label="'提醒日期'">
        <el-date-picker
          v-model="searchInfo.time"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
        ></el-date-picker>
      </SearchWarp>
      <SearchWarp :label="'提醒状态'">
        <el-select v-model="searchInfo.status" placeholder="请选择">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <AreaTitleWarp :title="'订单列表'">
      <el-button type="primary" icon="el-icon-circle-plus" @click="dialogVisible=true">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" @click="search">刷新</el-button>
    </AreaTitleWarp>

    <!--搜索结果区域-->
    <AreaWarp :padding="false">
      <el-table
	  	size="mini"
        :data="tableInfo.remindListDto"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark"
      >
        <el-table-column prop="num" label="序号"></el-table-column>
        <el-table-column
          prop="remindTime"
          label="提醒时间"
          min-width="150"
          :formatter="formatter_timeYMDHMS"
        ></el-table-column>
        <el-table-column prop="collectionUserRealname" label="提醒员"></el-table-column>
        <el-table-column prop="relationName" label="联系人姓名"></el-table-column>
        <el-table-column
          prop="relation"
          label="与借款人关系"
          min-width="120"
          :formatter="filter_relation"
        ></el-table-column>
        <el-table-column prop="relationMobile" label="联系人电话" min-width="120"></el-table-column>
        <el-table-column
          prop="repayWish"
          label="本人还款意愿"
          min-width="120"
          :formatter="formatter_repayWish"
        ></el-table-column>

        <el-table-column prop="status" label="提醒状态" min-width="120" :formatter="filter_status"></el-table-column>
        <el-table-column
          prop="isWishRemind"
          label="是否愿意转告"
          min-width="120"
          :formatter="formatter_isWishRemind"
        ></el-table-column>

        <el-table-column prop="content" label="备注" min-width="180"></el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper"
        class="pub-page"
        :current-page="searchInfo.page"
        :page-sizes="[20,50,100]"
        :page-size="searchInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
      ></el-pagination>
    </AreaWarp>

    <el-dialog
      title
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="50%"
      close="entryCancel"
    >
      <div class="dialog-body">
        <ul class="body-operation">
          <li>
            <span class="span1">联系电话:</span>
            <span class="span2">
              <el-input v-model="relationInfo.relationMobile" placeholder="请输入电话"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">联系人姓名:</span>
            <span class="span2">
              <el-input v-model="relationInfo.relationName" placeholder="请输入姓名"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">关系:</span>
            <span class="span2">
              <el-select v-model="relationInfo.relation" placeholder="请选择" @change="getRelation">
                <el-option
                  v-for="item in relationOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </li>
          <li>
            <span class="span1">联系状态:</span>
            <span class="span2">
              <el-select v-model="relationInfo.status" placeholder="请选择" @change="statusChange">
                <el-option
                  v-for="item in statusOptionsAdd"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </li>
          <!-- 还款意愿or是否愿意转告 -->
          <li v-if="relationFlag && relationSelf && statusFlag && statusSuc">
            <span class="span1">还款意愿:</span>
            <span class="span2">
              <el-select v-model="relationInfo.repayWish" placeholder="请选择">
                <el-option
                  v-for="item in repayWishOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </li>
          <li v-if="relationFlag && !relationSelf && statusFlag && statusSuc">
            <span class="span1">是否愿意转告:</span>
            <span class="span2">
              <el-select v-model="relationInfo.isWishRemind" placeholder="请选择">
                <el-option
                  v-for="item in wishCallOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </li>
          <!--  -->
          <li>
            <span class="span1">备注:</span>
            <span class="span2">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="relationInfo.content"
              ></el-input>
            </span>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="entryCancel">取 消</el-button>
        <el-button type="primary" @click="entrySure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Warn from "../../../assets/js/warn.js";
import {
  collectionStatus,
  relationStatus
} from "../../../assets/js/collectionStatus";

export default {
  props: ["queryMsg"],
  data() {
    return {
      searchInfo: {
        status: "",
        time: "",
        mobile: "",
        size: 20,
        page: 1
      },
      statusOptions: [],
      statusOptionsAdd: [],
      relationOptions: [],
      transmitWillOptionsAdd: [],
      tableInfo: {
        total: 0,
        list: []
      },
      dialogVisible: false,
      relationInfo: {
        collectionUserId: this.localData("get", "login_user").id,
        collectionUserRealname: this.localData("get", "login_user").realName,
        borrowId: this.queryMsg.borrowId,
        relationName: "",
        relationMobile: "",
        relation: "",
        status: "",
        transmitWill: "",
        content: "",
        remindName: ""
      },
      relationFlag: false,
      relationSelf: false,
      statusFlag: false,
      statusSuc: false,
      wishCallOptions: [
        {
          value: 1,
          label: "是"
        },
        {
          value: "0",
          label: "否"
        },
        {
          value: -1,
          label: "不祥"
        }
      ],
      repayWishOptions: [
        {
          value: 1,
          label: "有"
        },
        {
          value: "0",
          label: "无"
        },
        {
          value: -1,
          label: "不详"
        }
      ]
    };
  },
  methods: {
    // 关系切换
    getRelation(val) {
      let that = this;
      if (val) {
        that.relationFlag = true;
        if (val == 1) {
          that.relationSelf = true;
        } else {
          that.relationSelf = false;
        }
      } else {
        that.relationFlag = false;
      }
    },
    //状态切换
    statusChange(val) {
      let that = this;
      if (val) {
        that.statusFlag = true;
        if (val == 24) {
          that.statusSuc = true;
        } else {
          that.statusSuc = false;
        }
      } else {
        that.statusFlag = false;
      }
    },
    // 状态
    status() {
      let that = this;
      return new Promise(function(resolve, reject) {
        that.ajaxJson({
          url: "/static/order/custom/remindStatus",
          success: function(res) {
            if (res.code == "0") {
              let data = res.data;
              data.forEach(function(item) {
                that.statusOptions.push({
                  value: item.id,
                  label: item.resource
                });
                that.statusOptionsAdd.push({
                  value: item.id,
                  label: item.resource
                });
              });
              resolve();
            }
          }
        });
      });
    },
    //关系
    relation() {
      let that = this;
      return new Promise(function(resolve, reject) {
        that.ajaxJson({
          url: "/static/collection/relationList",
          success: function(res) {
            if (res.code == "0") {
              let data = res.data;
              data.forEach(function(item) {
                that.relationOptions.push({
                  value: item.id,
                  label: item.resource
                });
              });
              resolve();
            }
          }
        });
      });
    },
    //转告
    transmit() {
      let that = this;
      return new Promise(function(resolve, reject) {
        that.ajaxJson({
          url: "/static/finance/resourcelist",
          success: function(res) {
            if (res.code == "0") {
              let data = res.data;
              data.forEach(function(item) {
                that.transmitWillOptionsAdd.push({
                  value: item.id,
                  label: item.resource
                });
              });
              resolve();
            }
          }
        });
      });
    },
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let warn = new Warn(that.searchInfo);
      let reqData = warn.getState();
      if (reqData.code) {
        that.showMsg(reqData.message, "error");
        return;
      }
      reqData.borrowId = that.queryMsg.borrowId;
      that.loading = true;
      that.ajaxJson({
        url: "/order/custom/remindList",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
            resolve();
          }
          that.loading = false;
        }
      });
    },
    //重置
    reset() {
      let that = this;
      that.searchInfo = {
        status: "-1",
        time: "",
        mobile: "",
        size: 20,
        page: 1
      };
      that.tableInfo = {
        total: 0,
        list: []
      };
      that.search();
    },
    //取消
    entryCancel() {
      let that = this;
      that.relationInfo = {
        collectionUserId: this.localData("get", "login_user").id,
        collectionUserRealname: this.localData("get", "login_user").realName,
        borrowId: this.queryMsg.borrowId,
        relationName: "",
        relationMobile: "",
        status: "",
        transmitWill: "",
        content: "",
        relation: "",
        remindName: ""
      };
      that.relationFlag = false;
      that.dialogVisible = false;
    },
    //确定添加
    entrySure() {
      let that = this;
      if (
        !/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(that.relationInfo.relationMobile)
      ) {
        that.showMsg("请输入正确的手机号", "error");
        return;
      }
      if (!that.relationInfo.relationName) {
        that.showMsg("请输入联系人姓名", "error");
        return;
      }
      if (!that.relationInfo.relation) {
        that.showMsg("请输入选择关系", "error");
        return;
      }
      if (!that.relationInfo.status) {
        that.showMsg("请选择联系状态", "error");
        return;
      }
      if (
        that.relationFlag &&
        that.relationSelf &&
        !that.relationInfo.repayWish &&
        that.statusSuc
      ) {
        that.showMsg("请选择还款意愿", "error");
        return;
      }
      if (
        that.relationFlag &&
        !that.relationSelf &&
        !that.relationInfo.isWishRemind &&
        that.statusSuc
      ) {
        that.showMsg("请选择转告意愿", "error");
        return;
      }
      if (!that.relationInfo.content) {
        that.showMsg("请输入备注", "error");
        return;
      }

      that.relationInfo.remindName =
        that.queryMsg.remindName || localData("get", "login_user").nickname;

      that.ajaxJson({
        url: "/order/custom/saveRemind",
        data: that.relationInfo,
        success: function(res) {
          if (res.code == "0") {
            that.$message({
              type: "success",
              message: "添加成功!"
            });
            that.entryCancel();
            that.$emit("userCollection", {
              dialogVisibleShow: false
            });
          }
          that.search();
        }
      });
    },
    filter_status: collectionStatus,
    filter_relation: relationStatus
  },
  created() {
    let that = this;
    Promise.all([that.status(), that.relation(), that.transmit()]).then(arr => {
      that.search();
    });
  }
};
</script>
<style lang="less">
.dueRecord {
  .dialog-body {
    width: 100%;
    .body-message {
      width: 100%;
      overflow: hidden;
      li {
        width: 33.3%;
        float: left;
        line-height: 30px;
        .span1 {
          color: #999;
        }
        .span2 {
          color: #000;
        }
      }
    }
    .body-operation {
      margin-top: 20px;
      li {
        display: flex;
        line-height: 40px;
        margin-bottom: 10px;
        .span1 {
          width: 120px;
          flex: none;
          color: #999;
          text-align: right;
        }
        .span2 {
          flex: 1;
          margin-left: 20px;
          .el-input {
            width: 50% !important;
          }
          .el-select {
            .el-input {
              width: 100% !important;
            }
          }
          .el-input__inner {
            width: 100%;
            height: 36px;
            padding: 0 5px;
          }
          .el-checkbox__inner {
          }
        }
      }
    }
  }
}
</style>
